<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电价策略 - 新能源充电桩云平台</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        info: '#8C8C8C',
                        light: '#F5F5F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-primary/5 hover:text-primary rounded-lg transition-all duration-200;
            }
            .sidebar-item.active {
                @apply bg-primary/10 text-primary font-medium;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-30">
        <div class="container mx-auto px-4 flex items-center justify-between h-16">
            <div class="flex items-center gap-2">
                <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <div class="flex items-center gap-2">
                    <i class="fa fa-bolt text-primary text-2xl"></i>
                    <h1 class="text-xl font-bold text-gray-800">充电桩云平台</h1>
                </div>
            </div>
            <div class="flex items-center gap-4">
                <div class="relative hidden md:block">
                    <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                </div>
                <div class="flex items-center gap-3">
                    <button class="relative p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                        <i class="fa fa-bell text-lg"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
                    </button>
                    <div class="h-8 w-px bg-gray-200"></div>
                    <div class="flex items-center gap-2">
                        <img src="https://picsum.photos/id/1005/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-white shadow-sm">
                        <span class="hidden md:inline text-sm font-medium">管理员</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- 侧边栏 -->
        <aside id="sidebar" class="bg-white w-64 shadow-sm fixed lg:static h-[calc(100vh-4rem)] z-20 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 overflow-y-auto">
            <nav class="p-4">
                <div class="space-y-1">
                    <a href="/" class="sidebar-item">
                        <i class="fa fa-tachometer w-5 text-center"></i>
                        <span>控制台</span>
                    </a>
                    <a href="/devices" class="sidebar-item">
                        <i class="fa fa-plug w-5 text-center"></i>
                        <span>设备管理</span>
                    </a>
                    <a href="/transactions" class="sidebar-item">
                        <i class="fa fa-exchange w-5 text-center"></i>
                        <span>交易记录</span>
                    </a>
                    <a href="/pricing" class="sidebar-item active">
                        <i class="fa fa-money w-5 text-center"></i>
                        <span>电价策略</span>
                    </a>
                    <a href="/reports" class="sidebar-item">
                        <i class="fa fa-bar-chart w-5 text-center"></i>
                        <span>数据分析</span>
                    </a>
                </div>

                <div class="mt-8 pt-6 border-t border-gray-100">
                    <h3 class="px-4 text-xs font-semibold text-gray-400 uppercase tracking-wider">系统管理</h3>
                    <div class="mt-3 space-y-1">
                        <a href="#users" class="sidebar-item">
                            <i class="fa fa-users w-5 text-center"></i>
                            <span>用户管理</span>
                        </a>
                        <a href="#settings" class="sidebar-item">
                            <i class="fa fa-cog w-5 text-center"></i>
                            <span>系统设置</span>
                        </a>
                    </div>
                </div>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="flex-1 overflow-y-auto p-4 lg:p-6 bg-gray-50">
            <div class="container mx-auto">
                <!-- 页面标题 -->
                <div class="mb-6">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">电价策略管理</h2>
                    <p class="text-gray-500 mt-1">配置和管理分时电价策略，优化用电成本</p>
                </div>

                <!-- 当前电价概览 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                    <!-- 当前电价卡片 -->
                    <div class="bg-white rounded-xl p-5 card-shadow lg:col-span-1">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="font-semibold text-gray-800">当前电价</h3>
                            <span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded-full">生效中</span>
                        </div>
                        <div class="flex items-end gap-2 mb-4">
                            <span class="text-4xl font-bold text-gray-800" id="current-price">0.55</span>
                            <span class="text-gray-500 pb-1">元/kWh</span>
                        </div>
                        <div class="text-sm text-gray-500 mb-4">
                            <p>当前时段: <span class="font-medium text-gray-800" id="current-time-range">平段 (08:00-12:00)</span></p>
                            <p class="mt-1">更新时间: <span class="font-medium text-gray-800">2023-06-15 09:30:00</span></p>
                        </div>
                        <button id="edit-current-price" class="w-full py-2 border border-primary text-primary rounded-lg hover:bg-primary/5 transition-colors text-sm">
                            <i class="fa fa-pencil mr-1"></i> 调整电价
                        </button>
                    </div>

                    <!-- 电价曲线 -->
                    <div class="bg-white rounded-xl p-5 card-shadow lg:col-span-2">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="font-semibold text-gray-800">今日电价曲线</h3>
                            <div class="flex items-center gap-2">
                                <button class="text-sm text-gray-500 hover:text-primary">
                                    <i class="fa fa-download mr-1"></i> 导出
                                </button>
                                <button class="text-sm text-gray-500 hover:text-primary">
                                    <i class="fa fa-refresh mr-1"></i> 刷新
                                </button>
                            </div>
                        </div>
                        <div class="h-64">
                            <canvas id="priceChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- 分时电价配置 -->
                <div class="bg-white rounded-xl p-5 card-shadow mb-6">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="font-semibold text-gray-800">分时电价配置</h3>
                        <button id="add-time-range" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-2 text-sm">
                            <i class="fa fa-plus"></i>
                            <span>添加时段</span>
                        </button>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时段名称</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">开始时间</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">结束时间</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">电价 (元/kWh)</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody id="time-ranges-table-body" class="divide-y divide-gray-200">
                                <!-- 电价时段数据将通过JavaScript动态加载 -->
                                <tr class="animate-pulse">
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-20"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-16"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-16"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-16"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-6 bg-gray-200 rounded w-20"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-8 bg-gray-200 rounded w-24"></div></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="mt-6 pt-4 border-t border-gray-100 flex justify-end gap-3">
                        <button id="reset-pricing" class="px-4 py-2 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm">
                            重置
                        </button>
                        <button id="save-pricing" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm">
                            保存配置
                        </button>
                    </div>
                </div>

                <!-- 电价历史记录 -->
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-gray-800">电价调整历史</h3>
                        <div class="relative w-48">
                            <select class="w-full pl-4 pr-10 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary bg-white text-sm appearance-none">
                                <option>最近30天</option>
                                <option>最近90天</option>
                                <option>今年</option>
                                <option>全部</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none text-xs"></i>
                        </div>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">调整时间</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">调整人</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">调整内容</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody id="history-table-body" class="divide-y divide-gray-200">
                                <!-- 历史记录数据将通过JavaScript动态加载 -->
                                <tr class="animate-pulse">
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-32"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-20"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-4 bg-gray-200 rounded w-48"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-6 bg-gray-200 rounded w-20"></div></td>
                                    <td class="px-4 py-4 whitespace-nowrap"><div class="h-8 bg-gray-200 rounded w-24"></div></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 添加/编辑时段模态框 -->
    <div id="time-range-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-xl w-full max-w-md">
            <div class="p-6 border-b border-gray-100 flex items-center justify-between">
                <h3 class="text-xl font-bold text-gray-800" id="modal-title">添加电价时段</h3>
                <button id="close-modal" class="text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            <div class="p-6">
                <form id="time-range-form">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="range-name">时段名称</label>
                        <input type="text" id="range-name" name="range-name" class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="如：峰段、平段、谷段">
                    </div>

                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="start-time">开始时间</label>
                            <input type="time" id="start-time" name="start-time" class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1" for="end-time">结束时间</label>
                            <div class="relative">
                                <input type="time" id="end-time" name="end-time" class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                <div class="absolute -bottom-5 left-0 text-xs text-gray-500">
                                    <input type="checkbox" id="cross-day" name="cross-day" class="mr-1">
                                    <label for="cross-day">跨天</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-1" for="range-price">电价 (元/kWh)</label>
                        <input type="number" id="range-price" name="range-price" step="0.01" min="0" class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="0.00">
                    </div>

                    <div class="flex justify-end gap-3">
                        <button type="button" id="cancel-modal" class="px-4 py-2 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm">
                            取消
                        </button>
                        <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 侧边栏切换
        document.getElementById('sidebar-toggle').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('-translate-x-full');
        });

        // 模态框控制
        const timeRangeModal = document.getElementById('time-range-modal');
        const modalTitle = document.getElementById('modal-title');
        const timeRangeForm = document.getElementById('time-range-form');
        let currentEditingId = null;

        document.getElementById('add-time-range').addEventListener('click', function() {
            modalTitle.textContent = '添加电价时段';
            currentEditingId = null;
            timeRangeForm.reset();
            timeRangeModal.classList.remove('hidden');
        });

        document.getElementById('close-modal').addEventListener('click', function() {
            timeRangeModal.classList.add('hidden');
        });

        document.getElementById('cancel-modal').addEventListener('click', function() {
            timeRangeModal.classList.add('hidden');
        });

        // 点击模态框外部关闭
        timeRangeModal.addEventListener('click', function(e) {
            if (e.target === timeRangeModal) {
                timeRangeModal.classList.add('hidden');
            }
        });

        // 表单提交处理
        timeRangeForm.addEventListener('submit', function(e) {
            e.preventDefault();

            // 在实际应用中，这里应该通过API保存数据
            const name = document.getElementById('range-name').value;
            const startTime = document.getElementById('start-time').value;
            const endTime = document.getElementById('end-time').value;
            const price = document.getElementById('range-price').value;
            const crossDay = document.getElementById('cross-day').checked;

            if (!name || !startTime || !endTime || !price) {
                alert('请填写所有必填字段');
                return;
            }

            // 模拟保存成功
            timeRangeModal.classList.add('hidden');
            alert('电价时段保存成功');
            loadTimeRanges(); // 重新加载时段列表
        });

        // 模拟数据
        const mockData = {
            currentPrice: 0.55,
            currentTimeRange: '平段 (08:00-12:00)',
            priceData: {
                labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
                prices: [0.35, 0.35, 0.35, 0.35, 0.35, 0.35, 0.55, 0.55, 0.55, 0.55, 0.55, 0.55, 0.75, 0.75, 0.55, 0.55, 0.55, 0.75, 0.75, 0.75, 0.75, 0.55, 0.35, 0.35]
            },
            timeRanges: [
                { id: 1, name: '谷段', startTime: '00:00', endTime: '06:00', price: 0.35, status: 'active' },
                { id: 2, name: '平段', startTime: '06:00', endTime: '08:00', price: 0.55, status: 'active' },
                { id: 3, name: '平段', startTime: '08:00', endTime: '12:00', price: 0.55, status: 'active' },
                { id: 4, name: '峰段', startTime: '12:00', endTime: '14:00', price: 0.75, status: 'active' },
                { id: 5, name: '平段', startTime: '14:00', endTime: '17:00', price: 0.55, status: 'active' },
                { id: 6, name: '峰段', startTime: '17:00', endTime: '21:00', price: 0.75, status: 'active' },
                { id: 7, name: '平段', startTime: '21:00', endTime: '22:00', price: 0.55, status: 'active' },
                { id: 8, name: '谷段', startTime: '22:00', endTime: '24:00', price: 0.35, status: 'active' }
            ],
            history: [
                { time: '2023-06-15 09:30:00', user: '管理员', content: '调整峰段电价从0.70元到0.75元', status: '已生效' },
                { time: '2023-06-01 14:15:22', user: '系统管理员', content: '添加新时段：平段 (06:00-08:00)', status: '已生效' },
                { time: '2023-05-20 10:05:47', user: '管理员', content: '调整谷段时间从00:00-07:00改为00:00-06:00', status: '已生效' },
                { time: '2023-05-01 00:00:00', user: '系统', content: '执行节假日电价策略', status: '已过期' },
                { time: '2023-04-10 16:30:15', user: '管理员', content: '初始化分时电价策略', status: '已生效' }
            ]
        };

        // 填充当前电价
        document.getElementById('current-price').textContent = mockData.currentPrice;
        document.getElementById('current-time-range').textContent = mockData.currentTimeRange;

        // 绘制电价曲线图表
        const priceCtx = document.getElementById('priceChart').getContext('2d');
        new Chart(priceCtx, {
            type: 'line',
            data: {
                labels: mockData.priceData.labels,
                datasets: [{
                    label: '电价 (元/kWh)',
                    data: mockData.priceData.prices,
                    borderColor: '#165DFF',
                    backgroundColor: 'rgba(22, 93, 255, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: '#FFFFFF',
                    pointBorderColor: '#165DFF',
                    pointBorderWidth: 2,
                    pointRadius: 3,
                    pointHoverRadius: 5
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        callbacks: {
                            label: function(context) {
                                return `电价: ¥${context.raw}/kWh`;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        min: 0.3,
                        max: 0.9,
                        ticks: {
                            callback: function(value) {
                                return '¥' + value;
                            }
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // 加载电价时段列表
        function loadTimeRanges() {
            const tableBody = document.getElementById('time-ranges-table-body');
            tableBody.innerHTML = '';

            mockData.timeRanges.forEach(range => {
                const statusClass = range.status === 'active' ? 'bg-success/10 text-success' : 'bg-gray-100 text-gray-500';
                const statusText = range.status === 'active' ? '生效中' : '已停用';

                const row = document.createElement('tr');
                row.className = 'hover:bg-gray-50 transition-colors';
                row.innerHTML = `
                    <td class="px-4 py-4 whitespace-nowrap font-medium text-gray-800">${range.name}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-gray-600">${range.startTime}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-gray-600">${range.endTime} ${range.startTime > range.endTime ? '<span class="text-xs text-gray-500 ml-1">(跨天)</span>' : ''}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-gray-600">¥${range.price.toFixed(2)}</td>
                    <td class="px-4 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full ${statusClass}">${statusText}</span>
                    </td>
                    <td class="px-4 py-4 whitespace-nowrap">
                        <div class="flex items-center gap-2">
                            <button class="edit-range-btn px-2 py-1 text-xs border border-primary text-primary rounded hover:bg-primary/5 transition-colors" data-id="${range.id}">
                                <i class="fa fa-pencil mr-1"></i>编辑
                            </button>
                            <button class="px-2 py-1 text-xs border border-gray-200 text-gray-700 rounded hover:bg-gray-50 transition-colors">
                                <i class="fa fa-trash-o mr-1"></i>删除
                            </button>
                        </div>
                    </td>
                `;
                tableBody.appendChild(row);
            });

            // 添加编辑按钮事件
            document.querySelectorAll('.edit-range-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const id = parseInt(this.getAttribute('data-id'));
                    const range = mockData.timeRanges.find(r => r.id === id);
                    if (range) {
                        currentEditingId = id;
                        modalTitle.textContent = '编辑电价时段';
                        document.getElementById('range-name').value = range.name;
                        document.getElementById('start-time').value = range.startTime;
                        document.getElementById('end-time').value = range.endTime;
                        document.getElementById('range-price').value = range.price;
                        document.getElementById('cross-day').checked = range.startTime > range.endTime;
                        timeRangeModal.classList.remove('hidden');
                    }
                });
            });
        }

        // 加载历史记录
        function loadHistory() {
            const tableBody = document.getElementById('history-table-body');
            tableBody.innerHTML = '';

            mockData.history.forEach(record => {
                const statusClass = record.status === '已生效' ? 'bg-success/10 text-success' : 'bg-gray-100 text-gray-500';

                const row = document.createElement('tr');
                row.className = 'hover:bg-gray-50 transition-colors';
                row.innerHTML = `
                    <td class="px-4 py-4 whitespace-nowrap text-gray-600">${record.time}</td>
                    <td class="px-4 py-4 whitespace-nowrap text-gray-600">${record.user}</td>
                    <td class="px-4 py-4 text-gray-600 max-w-xs">${record.content}</td>
                    <td class="px-4 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full ${statusClass}">${record.status}</span>
                    </td>
                    <td class="px-4 py-4 whitespace-nowrap">
                        <button class="px-2 py-1 text-xs text-primary hover:underline transition-colors">
                            查看详情
                        </button>
                    </td>
                `;
                tableBody.appendChild(row);
            });
        }

        // 初始化页面数据
        loadTimeRanges();
        loadHistory();

        // 编辑当前电价按钮事件
        document.getElementById('edit-current-price').addEventListener('click', function() {
            const newPrice = prompt('请输入新的默认电价 (元/kWh):', mockData.currentPrice);
            if (newPrice !== null) {
                const price = parseFloat(newPrice);
                if (!isNaN(price) && price >= 0) {
                    mockData.currentPrice = price;
                    document.getElementById('current-price').textContent = price.toFixed(2);
                    alert('默认电价已更新');
                } else {
                    alert('请输入有效的价格');
                }
            }
        });

        // 保存配置按钮事件
        document.getElementById('save-pricing').addEventListener('click', function() {
            this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 保存中...';
            this.disabled = true;

            setTimeout(() => {
                this.innerHTML = '<i class="fa fa-check mr-2"></i> 保存成功';
                this.classList.remove('bg-primary');
                this.classList.add('bg-success');

                setTimeout(() => {
                    this.innerHTML = '保存配置';
                    this.disabled = false;
                    this.classList.remove('bg-success');
                    this.classList.add('bg-primary');
                }, 2000);
            }, 1500);
        });

        // 重置按钮事件
        document.getElementById('reset-pricing').addEventListener('click', function() {
            if (confirm('确定要重置所有电价配置吗？这将恢复到默认设置。')) {
                loadTimeRanges(); // 重新加载默认数据
                alert('电价配置已重置');
            }
        });
    </script>
</body>
</html>